<meta charset="UTF-8">
<!-- 工具栏 -->
<div id="toolbar" class="btn-group">
	<button data-bind="click:addClick" onclick="btn_add()" type="button"class="btn btn-default">
		<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
	</button>
	<button data-bind="click:editClick"onclick="btn_edit()"type="button"class="btn btn-default">
		<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
	</button>
	<button id="btn_delete"  data-bind="click:deleteClick" type="button" onclick="btn_delete()"
		class="btn btn-default">
		<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
	</button>

	 
</div>
<form id="searchForm" class="form-inline"style="padding-top: 10px;"> 
		<div class="form-group"> 
			<input type="text" class="form-control" id="sname1" name="sname1" placeholder="请输入用户名"> 
			<input type="text" class="form-control" id="sname1" name="sname1" placeholder="请输入姓名"> 
		</div> 
		<div class="btn-group"> 
			<button type="button" id="searchBtn" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> 查询</button>
			<button type="button" id="cleanBtn" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span> 清空</button>
		</div> 
	</form>
<table id="mytab"></table>
<script type="text/javascript">

$(function() {  
        //根据窗口调整表格高度
        $(window).resize(function() {
            $('#mytab').bootstrapTable('resetView', {
                height: tableHeight()
            });
        });
        $('#mytab').bootstrapTable({
            url: "user/page",//请求地址
            dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total
            dataType: "json",//期待返回数据类型
            method: "post",//请求方式
            toolbar: "#toolbar",//指定工具栏,工具按钮用哪个容器
            height: tableHeight(),//高度调整
            sidePagination: "server",//服务端分页
            queryParams: function (param) {
		            return  {
		            	limit: param.limit, 
		            	offset: param.offset,
		            	search:param.search,
		            	sort:param.sort,
		            	order:param.order
		            };
		         },
            search: true,//是否启用搜索框
            queryParamsType: "limit",//查询参数组织方式
            searchAlign: "right",//搜索框对齐方式
            pagination: true,//是否分页
            pageSize: 10,//单页记录数
            pageList: [10, 20, 30],//分页步进值
            showRefresh: true,//刷新按钮
            showColumns: true,//列选择按钮
            showToggle:true,  //切换格式按钮
            clickToSelect:true,//是否启用点击选中行
            singleSelect:true, //选中行
            selectIds:[],		//选中的行的id号
            toolbarAlign: "left",//工具栏对齐方式
            buttonsAlign: "right",//按钮对齐方式
            locale: "zh-CN", //中文支持
            columns: [
                {title: "全选",field: "select",checkbox: true,width: 20,align: "center",valign: "middle"},
                {title: "ID",field: "id",sortable: true,order: "desc"},//是否可排序
                {field: "name",title: "姓名",sortable: true,titleTooltip: "这是姓名"},
                {field: "username",title: "用户名",sortable: true,titleTooltip: "这是用户名"},
                {field: "age",title: "年龄",sortable: true},
                {field: "sex",title: "性别",sortable: true},
                {field: "phone",title: "电话"},
                {field: "ranmek",title: "备注"}
                ],
            onClickRow: function(row, $element) {
                //$element是当前tr的jquery对象
                //单击row事件
               //$element.css("background-color", "#cdcdcd");
            },
            detailFormatter: function(index, row, element) {
                var html = '';
                $.each(row, function(key, val){
                    html += "<p>" + key + ":" + val +  "</p>"
                });
                return html;
            }
        });
       $('#searchBtn').click(function(){
    	   var sname1 = $("#sname1").val();
    	   $.ajax({
    		   type:'post',
    		   url:'user/page',
    		   dataType: "json", 
    		   data:{sname1:sname1},
    		   success:function(json1){
    			   $("#mytab").bootstrapTable('load', json1);
    			   alert(json1);
    			   
    		   }
    	   });
       })
       
    });
	function tableHeight() {
	    return $(window).height() - 110;
	}

  function btn_add(){
	  var dialog = $('<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel"></div>');
		dialog.load("user/edit");
		/*添加到body中*/
		$("body").append(dialog);
		dialog.modal().on('hidden.bs.modal', function () {//弹出模态框,绑定关闭后的事件
      	dialog.remove();//删除
      });
	  
  }
  function btn_edit(){
	  var a= $('#mytab').bootstrapTable('getSelections');
	  if(a.length!=1){
		  bootbox.alert("请选中一行进行编辑");
	  }else{ 
			var id = a[0].id;
			var dialog = $('<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel"></div>');
			dialog.load("user/edit?id="+id);
			$("body").append(dialog);
			dialog.modal().on('hidden.bs.modal',function(){
	      	dialog.remove();
		});
	 }
  }

function btn_delete(){
	var a= $('#mytab').bootstrapTable('getSelections');
	  if(a.length!=1){
		 
		  bootbox.alert("请选中一行进行删除");
	  }else{
		    bootbox.confirm({
		        title: "提示信息",
		        message: '<h4>确定删除选中的记录吗？</h4>',
		        buttons: {
		            cancel: {
		                label: '<i class="glyphicon glyphicon-remove"></i> 取消'
		            },
		            confirm: {
		                label: '<i class="glyphicon glyphicon-ok"></i> 确定'
		            }
		        },
		        callback: function (result) {
		        	if(result== true){
			        	var id = a[0].id;
						$.post('user/delete',{id:id},function(){
							$('#mytab') .bootstrapTable('refresh');
							bootbox.alert('<h4>'+"删除成功！"+'</h4>')
						});
		        	}
		        }
		    });
		 }
	}
	   
 
</script>



